<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="300px">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      v-loading="formLoading"
      label-width="auto"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="文件夹名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入文件夹名称" :clearable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :disabled="formLoading" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup name="MailFolderNew" lang="ts">
import * as mailApi from '@/api/mailbox/mail'
const dialogTitle = ref('新建文件夹')
const dialogVisible = ref(false)
const formRef = ref()
const formLoading = ref(false)
const formData = ref({
  name: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '请输入文件夹名称', trigger: 'change' }]
})
const { t } = useI18n() // 国际化
let params: any = {}
/** 打开弹窗 */
const open = (param) => {
  if (param.type == 'rename') {
    formData.value.name = param.folderName
  } else {
    formData.value.name = undefined
  }
  dialogTitle.value = t('action.' + param.type)
  params = param
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(['success'])
/** 提交表单 */
const submitForm = async () => {
  if (params.type == 'create') {
    await mailApi.createFolder({
      accountId: params.accountId,
      name: formData.value.name,
      parentId: params.folderId
    })
  } else {
    await mailApi.updateFolder({ id: params.folderId, name: formData.value.name })
  }
  dialogVisible.value = false
  emit('success', params.accountId)
}
</script>
